let okRegister = false;
let Register = document.querySelector('#okRegister');
let login_inputs = document.querySelectorAll('.login input');
let register_inputs = document.querySelectorAll('.register input');
let login_description = document.querySelector(".login .description");
let rememberPassworld = document.querySelector('#rememberPassworld');
console.log(rememberPassworld);
let login_isremember = false;
document.querySelector("#rememberPassworld").addEventListener('click', function () {
    console.log("%c我点", "color:skyblue; padding:20px; border:1px solid skyblue");
    login_description.innerHTML = "";
    rememberPassworld.setAttribute('disabled', '');
    login_isremember = !login_isremember;
    if (login_isremember) {
        login_description.innerHTML = "";
        textGo(login_description, '那我就勉为其难得帮你记住密码好了', true, function () {
            rememberPassworld.removeAttribute('disabled');
        });
    } else {
        login_description.innerHTML = "";
        textGo(login_description, '那就算了吧', true, function () {
            rememberPassworld.removeAttribute('disabled');
        });
    }
})

document.querySelector('#goLogin').addEventListener('click', function () {
    box.$data.isShow = !box.$data.isShow;
});
console.log(document.querySelector("#goLogin").value);
document.querySelector('#goRegister').addEventListener('click', function () {
    box.$data.isShow = !box.$data.isShow;
});

document.querySelector('#rememberMain').onclick = function () {
    okRegister = !okRegister;
    if (okRegister) {
        Register.removeAttribute('disabled');
        Register.setAttribute('title', '您已同意协议')
    } else {
        Register.setAttribute('disabled', '');
        Register.setAttribute('title', '请先同意协议后再进行操作')
    }
}
var jieliufa = true;
document.querySelector('#loginNow').addEventListener('click', function (e) {
    if (jieliufa) {
        jieliufa = false;
        for (let i = 0; i < login_inputs.length; i++) {
            if (login_inputs[i].value == '' || login_inputs[i].value.trim() == '') {
    
                login_inputs[i].focus();
                login_inputs[i].style.borderBottom = "1px solid hotpink";
                login_inputs[i].style.color = "hotpink";
                // login_inputs[i].value = "请正确输入此项!";
                switch (i) {
                    case 0:
                        textGo(login_inputs[i], "连名字都没有吗,你这废物", false, function () {
                            login_inputs[i].style.borderBottom = "1px solid rgb(212, 212, 212)";
                            login_inputs[i].style.color = "slateblue";
                            jieliufa = true;
                        });
                        break;
                    case 1:
                        login_inputs[i].type = "text";
                        textGo(login_inputs[i], "登录不写密码,你脑子被驴吃了？", false, function () {
                            login_inputs[i].type = "password";
                            login_inputs[i].style.borderBottom = "1px solid rgb(212, 212, 212)";
                            login_inputs[i].style.color = "slateblue";
                            jieliufa = true;
                        });
                        break;
                    case 2:
                        login_inputs[i].type = "text";
                        textGo(login_inputs[i], "写！验！证！码,跟你这笨蛋浪费时间 ?", false, function () {
                            login_inputs[i].style.borderBottom = "1px solid rgb(212, 212, 212)";
                            login_inputs[i].style.color = "slateblue";
                            jieliufa = true;
                        });
                        break;
                    default:
                        break;
                }
                break;
            }
        }
    }
});
var jieliufa2 = true;
document.querySelector('#okRegister').addEventListener('click', function (e) {
    if (jieliufa2) {
        jieliufa2 = false;
        for (let i = 0; i < register_inputs.length; i++) {
            if (register_inputs[i].value == '' || register_inputs[i].value.trim() == '') {
    
                register_inputs[i].focus();
                register_inputs[i].style.borderBottom = "1px solid hotpink";
                register_inputs[i].style.color = "hotpink";
                // register_inputs[i].value = "请正确输入此项!";
                switch (i) {
                    case 0:
                        textGo(register_inputs[i], "亲爱的,你到底想叫什么名字呢", false, function () {
                            register_inputs[i].style.borderBottom = "1px solid rgb(212, 212, 212)";
                            register_inputs[i].style.color = "slateblue";
                            jieliufa2 = true;
                        });
                        break;
                    case 1:
                        register_inputs[i].type = "text";
                        textGo(register_inputs[i], "亲爱的,给自己想个密码吧~", false, function () {
                            register_inputs[i].type = "password";
                            register_inputs[i].style.borderBottom = "1px solid rgb(212, 212, 212)";
                            register_inputs[i].style.color = "slateblue";
                            jieliufa2 = true;
                        });
                        break;
                    case 2:
                        register_inputs[i].type = "text";
                        textGo(register_inputs[i], "烦请您再写一遍密码在这里哦~", false, function () {
                            register_inputs[i].type = "password";
                            register_inputs[i].style.borderBottom = "1px solid rgb(212, 212, 212)";
                            register_inputs[i].style.color = "slateblue";
                            jieliufa2 = true;
                        });
                        break;
                    case 3:
                        register_inputs[i].type = "email";
                        textGo(register_inputs[i], "日后您忘记密码我会为您找回~", false, function () {
                            register_inputs[i].style.borderBottom = "1px solid rgb(212, 212, 212)";
                            register_inputs[i].style.color = "slateblue";
                            jieliufa2 = true;
                        });
                        break;
                    case 4:
                        console.log("eeeee");
                        textGo(register_inputs[i], "为确保亲爱的你不是机器人.请填写~", false, function () {
                            register_inputs[i].style.borderBottom = "1px solid rgb(212, 212, 212)";
                            register_inputs[i].style.color = "slateblue";
                            jieliufa2 = true;
                        });
                        break;
                }
                break;
            }
        }
    }
});


function textGo(giveDom, TextString, noBack, callback, speed) {

    var dom = typeof giveDom == "string" ? document.querySelector(giveDom) : giveDom;
    speed = speed != undefined ? speed : 50;
    var arr = TextString.split('');
    var timer;
    var i = 0;
    var j = 0;
    if (dom.value !== undefined) {
        timer = setInterval(function () {
            if (i < arr.length) {
                dom.value += arr[i++];
            } else {
                clearInterval(timer);
                if (noBack) {
                    if (callback) {
                        callback();
                    }
                } else {
                    j = i;
                    setTimeout(function () {
                        timer = setInterval(function () {
                            if (j != 0) {
                                arr.pop(j--);
                                dom.value = arr.join('');
                            } else {
                                clearInterval(timer);
                                if (callback) {
                                    callback();
                                }
                            }
                        }, 100)
                    }, 1000)
                }
            }
        }, speed);
    } else {
        timer = setInterval(function () {
            if (i < arr.length) {
                dom.innerHTML += arr[i++];
            } else {
                clearInterval(timer);
                if (noBack) {
                    if (callback) {
                        callback();
                    }
                } else {
                    j = i;
                    setTimeout(function () {
                        timer = setInterval(function () {
                            if (j != 0) {
                                arr.pop(j--);
                                dom.innerHTML = arr.join('');
                            } else {
                                clearInterval(timer);
                                if (callback) {
                                    callback();
                                }
                            }
                        }, 100)
                    }, 1000)
                }
            }
        }, speed);
    }
}


let MessageBox = document.querySelector(".alertMessage");

function alertMessageBox(obj, text, callback) {
    MessageBox.style.opacity = 0;
    MessageBox.style.transition = "none";
    MessageBox.style.left = obj.offsetLeft + 'px';
    MessageBox.style.top = obj.offsetTop + 'px';
    // transform: translate();
    MessageBox.style.transform = "translate(-40%,-120%)";
    MessageBox.style.transition = "all .6s";
    MessageBox.style.opacity = 1.0;
    MessageBox.style.display = "block";
    MessageBox.querySelector('.message').innerHTML = "";
    textGo(MessageBox.querySelector('.message'), text, true, function () {
        if (callback) {
            callback();
        }
    }, 100);
    // window.addEventListener.call(document.querySelector("#forgetPassword"),'mouseleave',function(){
    //     console.log(this);
    //     MessageBox.style.opacity = 0;
    //     setTimeout(function(){
    //         MessageBox.style.display = "none";
    //     },600)
    // });
}

document.querySelector("#forgetPassword").addEventListener('mousedown', function (e) {
    alertMessageBox(this, "密码忘记了就忘记了,有什么好说的呢????", function () {
        setTimeout(function () {
            MessageBox.style.opacity = 0;
        }, 1000);
        setTimeout(function () {
            MessageBox.style.display = 'none';
        }, 1600);
    });
});
// document.querySelector("#forgetPassword").addEventListener('mouseleave',function(e){
//     MessageBox.style.opacity = 0;
//     setTimeout(function(){
//         MessageBox.style.display= "none";
//     },600)
// });